<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>05_层次选择器</title>
</head>

<body>
    <ul>
        <li>AAAAA</li>
        <li class="box">CCCCC</li>
        <li title="hello"><span>BBBBB</span></li>
        <li title="hello"><span>DDDD</span></li>
        <span>EEEEE</span>
    </ul>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        /*
        需求：
        1.选中ul下所有的的span
        2.选中ul下所有的子元素span
        3.选中class为box的下一个Li
        4.选中u儿下的class为box的元素后面的所有兄弟元素
        */
        //1.选中ul下所有的的span
        $('ul span').css('background', 'yellow')
        //2.选中ul下所有的子元素span
        $('ul>span').css('background', 'red')
        // 3.选中class为box的下一个Li
        $('.box+li').css('background', 'blue')
        //4.选中u儿下的class为box的元素后面的所有兄弟元素
        $('ul .box~*').css('background', 'pink')


    </script>
</body>

</html>